/*
 * @Descripttion: 
 * @Author: cuidm
 * @Date: 2022-06-14 11:09:05
 * @LastEditors: cuidm
 * @LastEditTime: 2022-10-20 17:06:54
 */
import React, { useState, useEffect, useRef } from "react";
import { Button, Skeleton, Drawer } from "antd";
import { ProDescriptions } from '@ant-design/pro-components';
import request, { exportFile } from "@/utils/request";
import cmdbres from "@/data/cmdbres";
import hcpUtils from "@/utils/hcpUtils";
import regexpUtil from "@/utils/regexpUtil";
import moment from "moment";

const { uniqueIdentificationRegexp, commonTextRegexp } = regexpUtil;
const DetailsModal = (props) => {
    const { visible, setVisible, info } = props;
    const [columns, setColumns] = useState([]);
    const [resInfo, setResInfo] = useState({});
    const [groupData, setGroupData] = useState([]);
    const [loading, setLoading] = useState(false);

    useEffect(() => {
        if (visible && info?.cm_module_id) {
            console.log(info)
            setResInfo(info);
            fetchData();
        }
    }, [visible])

    const queryModelPropertyGroup = async () => {
        try {
            let res = await request({ 
                ...cmdbres.queryModelPropertyGroup(info.cm_module_id),
            });
            if (res && res.code == 200) {
                let arr = res.data || [];
                const defaultObj = arr.find(item=> item.propertyGroup == "default");
                if(!defaultObj) {
                    arr.unshift({
                        propertyGroup: 'default',
                        propertyGroupName: '基本信息'
                    })
                }
                setGroupData(arr);
            } else {
                setGroupData([]);
            }
        } catch (error) {
            setGroupData([]);
            console.log(error);
        }
    }

    const queryTableHeaders = async () => {
        try {
            const res = await request({
                ...cmdbres.queryTableHeader,
                params: {
                    cm_module_id: info.cm_module_id
                },
            });
            const arr = [{
                key: 'cm_unid',
                title: 'ID',
                dataIndex: 'cm_unid',
                propertyKey:'cm_unid',
                propertyGroup: 'default',
            }]
            if (res && res.code == 200 && res.data && res.data.fields && res.data.fields.length) {
                let fieldData = res.data.fields.sort(function (a, b) { return a.propertyIndex - b.propertyIndex; });
                fieldData.map((item, index) => {
                    let field = {
                        ...item,
                        key: item.propertyKey,
                        title: item.unit ? `${item.propertyName}(${item.unit})` : item.propertyName,
                        dataIndex: item.propertyKey,
                        width: 130,
                    };
                    arr.push(field);
                });
            } 
            setColumns(arr);
        } catch (error) {
            console.log("queryTableHeaders -> error", error);
        } 
    }

    const fetchData = async() => {
        setLoading(true);
        await Promise.all([queryTableHeaders(), queryModelPropertyGroup()]);
        setLoading(false);
    };

    return (
        <Drawer 
            className="drawer-table-columns create-field"
            title={'查看详情'}
            placement={'right'}
            width={600}
            onClose={() => { setVisible(false) }}
            visible={visible}
            footer={null}
        >
            {
                loading ?
                <Skeleton active />:
                <>
                {
                    groupData.map((item, index)=> {
                        return (
                            <ProDescriptions
                                column={2}
                                ellipsis={true}
                                key={index}
                                title={item.propertyGroupName}
                                dataSource={resInfo}
                                columns={columns}
                                style={{padding: "20px"}}
                            >
                            </ProDescriptions>
                        )
                    })
                }
                </>
            }
            <div className="modal-body-footer">
                <Button onClick={() => { setVisible(false) }} type="primary">确定</Button>
            </div>
        </Drawer>
    )
}

export default DetailsModal;